<template>
  <!-- 搜索框  -->
  <div class="p-2 pt-4 bg-white mb-3">
    <Form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      layout="horizontal"
      :model="formState"
      @finish="onFinish"
    >
      <Row :gutter="24">
        <Col :span="18">
          <div class="search-flex">
            <FormItem name="domainId" label="选择国家" required>
              <Select v-model:value="formState['domainId']" style="width: 200px; margin-right: 6px">
                <SelectOption value="">选择国家...</SelectOption>
                <SelectOption value="1">US</SelectOption>
                <SelectOption value="2">GB</SelectOption>
                <SelectOption value="3">DE</SelectOption>
                <SelectOption value="4">FR</SelectOption>
                <SelectOption value="5">JP</SelectOption>
                <SelectOption value="6">CA</SelectOption>
                <SelectOption value="8">IT</SelectOption>
                <SelectOption value="9">ES</SelectOption>
                <!--                <SelectOption value="10">IN</SelectOption>-->
                <!--                <SelectOption value="11">MX</SelectOption>-->
                <!--                <SelectOption value="12">BR</SelectOption>-->
              </Select>
            </FormItem>
            <FormItem name="month" label="选择月份" v-bind="rangeConfig">
              <DatePicker
                v-model:value="formState['month']"
                value-format="YYYY-MM"
                picker="month"
              />
            </FormItem>
          </div>
        </Col>
        <Col :span="6" style="text-align: right">
          <Button type="primary" html-type="submit">搜索</Button>
          <Button style="margin: 0 6px" @click="() => formRef.resetFields()">清空</Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
  import {
    FormInstance,
    Select,
    SelectOption,
    Form,
    FormItem,
    Row,
    Col,
    Button,
    DatePicker,
  } from 'ant-design-vue'
  import { reactive, ref } from 'vue'

  const props = defineProps({
    searchInfo: Object,
  })
  const emit = defineEmits(['confirmSearch'])

  const formRef = ref<FormInstance>()
  interface FormState {
    month: any
    domain: string
  }
  const formState = reactive({
    domainId: '',
    month: '',
  } as FormState)

  formState['domainId'] = props.searchInfo.domainId + ''
  formState['month'] = props.searchInfo.month

  const rangeConfig = {
    rules: [{ type: 'string' as const, required: true, message: '请选择月份!' }],
  }

  const onFinish = (values: any) => {
    emit('confirmSearch', values)
  }

  const onChange = (pageNumber: number) => {
    emit('pageClick', pageNumber)
  }
</script>

<style scoped>
  .tree-div {
    padding: 0 8px;
    margin: 0 6px;
  }

  .expand-icon {
    margin-right: 6px;
    cursor: pointer;
  }

  .tree-div li {
    white-space: nowrap;
    margin-bottom: 5px;
  }

  .sku-span {
    color: #2db7f5;
    cursor: pointer;
  }

  .count-span {
    color: #f50;
    cursor: pointer;
  }

  .line-span {
    color: #752fea;
    cursor: pointer;
  }

  .name-span {
    cursor: pointer;
  }
</style>
